import "./tagItem.css";
import { computed, defineComponent } from "vue";
import { status as tags } from "@/utils/constant";

const props = {
  size: {
    type: String,
    default: "default"
  },
  type: {
    type: String,
    require: false,
    default: "run"
  }
};

const defaultTagColors: {
  backgroundColor: string;
  color: string;
} = {
  backgroundColor: "#DEDFE0",
  color: "#222"
};

export default defineComponent({
  name: "ReTag",
  props,
  setup(props) {
    const tag = computed(() => tags.find(item => item.value === props.type.toLocaleLowerCase()));
    const tagText = computed(() => {
      if (tag.value) {
        return tag.value.label;
      } else {
        return props.type || "NOTTAG";
      }
    });
    const tagStyle = computed(() => {
      let backgroundColor = "";
      let color = "";
      if (tag.value) {
        backgroundColor = tag.value.backgroundColor;
        color = tag.value.color;
      } else {
        backgroundColor = defaultTagColors.backgroundColor;
        color = defaultTagColors.color;
      }
      return { backgroundColor, color };
    });

    return () => (
      <div class={["self-tag", props.size === "default" ? "" : `self-tag-${props.size}`]} style={tagStyle.value}>
        {tagText.value}
      </div>
    );
  }
});
